<template>
  <el-dialog
    append-to-body
    title="详情"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <el-form
      ref="ruleForm"
      class="demo-ruleForm"
      label-width="100px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="原密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入原密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="form.newPwd" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input v-model="form.confirmPwd" placeholder="请再次输入新密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
        <el-button @click="reset('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
  import {changePwd} from '@/api/user'
    export default {
      data() {
        return {
          userId:'',
          dialogVisible:false,
          form: {password:'',newPwd:'',confirmPwd:''},
          rules: {
            password: [
              { required: true, message: '请输入原密码', trigger: 'blur' }
            ],
            newPwd: [
              { required: true, message: '请输入新密码', trigger: 'blur' }
            ],
            confirmPwd: [
              { required: true, message: '请再次输入新密码', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        show(userId){
          this.userId = userId
          this.dialogVisible = true
        },
        submit(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              const {msg} = await changePwd(this.form,this.userId)
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              this.dialogVisible = false
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        reset(formName) {
          this.$refs[formName].resetFields()
        }
      }
    }
</script>

<style lang="scss" scoped></style>
